import React, { Component } from 'react';

/* 
  用React实现todoMvc的案例
  1.利用组件化编程思想 分为四个组件 Header TodoList TodoItem Footer 四个组件
    => 其中 TodoItem 是 TodoList的子组件 
    => 这四个组件 都是 App组件的子组件
  2.功能
    => 按回车键可以将Header组件输入的内容 自动渲染到TodoList组件里面
    => 有全选和单选功能
    => TodoList 组件里面 双击某一个TodoItem可以显示编辑框 点击回车可以确定编辑改变内容
    => 鼠标划入TodoItem 可以显示删除按钮 点击删除按钮可以删除一条TodoItem
    => 在全选的情况下 取消其中一个的话 那么全选按钮也不能被全中且如果TodoItem 的数量为0的话 也要取消全选
    => Footer 组件里面 未完成的Todo如果只有一条的话 那么显示 item 否则的话 显示 items
    => 点击 All按钮 显示所有todo
    => 点击 active按钮 显示所有未完成的Todo
    => 点击 Complete按钮 显示所有未完成的Todo
    => 点击 clear Complete 删除所有已完成
    => 如果Todo数量为0的话 那么Footer组件也要隐藏
*/

export class Header extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      text:''
    }
    
    console.log(this.props)

    this.handlerChange = this.handlerChange.bind(this);
    this.handlerKeyDown = this.handlerKeyDown.bind(this);
  }
  render() {
    return (
      <header>
        <label><input type="checkbox" onChange={this.changeAll.bind(this)} checked={this.isAll()}/></label>
        <input value={this.state.text}  onChange={this.handlerChange} onKeyDown={this.handlerKeyDown} type="text" placeholder='What needs to be done?'/>
      </header>
    )
  }
  handlerChange(e) {
    // if(e.target.value.length !== 0) {
    //   return;
    // }
    this.setState({text: e.target.value})
    
  }
  handlerKeyDown(e) {
    if(e.code !== 'Enter') {
      return;
    }
    if(!this.state.text) return;
    const newTodo = {
      id:new Date(),
      title:this.state.text,
      isDone:false
    }
    this.props.addTodo(newTodo)
    this.setState({text: ''})
  }

  changeAll(e) {
    this.props.changeAll(e.target.checked)
  }

  isAll() {
    const items = JSON.parse(localStorage.getItem('ReactTodos')) || [];
    // return this.props.state.list.length === this.props.state.list.filter(item => item.isDone).length && this.props.state.list.filter(item => item.isDone).length !== 0;
    return items.length === this.props.state.list.length &&  this.props.state.list.length === this.props.state.list.filter(item => item.isDone).length && this.props.state.list.filter(item => item.isDone).length !== 0;
  }
}




class TodoItem extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      isShow:true,
      title: props.name.title
    }
  }
  render() {
    return (
        <li >
          <label htmlFor=""><input type="checkbox" checked={this.props.name.isDone} onChange={this.checkItem.bind(this)}/></label>
          {
            this.state.isShow ? <div onDoubleClick={this.handlerDel.bind(this)}><h1>{this.props.name.title}</h1></div> : <input type="text" value={this.state.title} onChange={this.changeTitle.bind(this)} onKeyDown={this.handlerKeyDown.bind(this)}/> 
          }
          
          
          {this.state.isShow ? <button onClick={this.removeTodo.bind(this)}>删除</button> : ''}
        </li>
    )
  }

  checkItem() {
    this.props.checkItem(this.props.index)
  }

  removeTodo() {
    this.props.removeTodo(this.props.index)
  }
  changeTitle(e) {
    if(e.target.value === 0) return;
    this.setState({
      title:e.target.value
    })
  }
  handlerDel() {
    this.setState({
      isShow:false
    })
  }
  handlerKeyDown(e) {
    if(e.code !== 'Enter') return;
    if(!this.state.title) {
      this.props.removeTodo(this.props.index)
    }
    this.props.name.title = this.state.title
    this.setState({
      isShow:true
    },function () {
      this.props.editTodo()
    })
  }
}

export class TodoList extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <section>
        <ul>
          {
            this.props.name.list.map((item, index) => (
              <TodoItem editTodo={this.props.editTodo} name={item} key={index} index={index} checkItem={this.props.checkItem} removeTodo={this.props.removeTodo}></TodoItem>
            ))
          }
        </ul>
      </section>
    )
  }
}

export class Footer extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <footer>
        <div className="left">{this.props.items.length} item{this.isCompleteTotal() === 1 ? '' : 's'}</div>
        <div className="status">
          <span onClick={this.handlerAll.bind(this)}>All</span>
          <span onClick={this.handlerActive.bind(this)}>Active</span>
          <span onClick={this.handlerComplete.bind(this)}>Complete</span>
        </div>
        {
          this.isShowclearComplete() ? <div className="removeComplete" onClick={this.clearComplete.bind(this)}>clear Complete</div> : ''
        }
      </footer>
    )
  }

  isCompleteTotal() {
    return this.props.items.filter(item => !item.isDone).length
  }
  handlerAll(){
    const items = JSON.parse(localStorage.getItem('ReactTodos'))
    this.props.statusHandler(items)
  }
  handlerActive(){
    const items = JSON.parse(localStorage.getItem('ReactTodos')).filter(item => !item.isDone)
    this.props.statusHandler(items)
  }
  handlerComplete(){
    const items = JSON.parse(localStorage.getItem('ReactTodos')).filter(item => item.isDone)
    this.props.statusHandler(items)
  }
  clearComplete(){
    this.props.clearComplete()
  }
  isShowclearComplete() {
    return this.props.items.filter(item => item.isDone).length !== 0;
  }



}






